<template>
  <div class="policy-graph-container">
    <h1>政策基因图谱演示</h1>
    <div id="policy-graph" ref="cyContainer"></div>

    <!-- 政策详情侧边栏 -->
    <div :class="['detail-sidebar', { 'open': isSidebarOpen }]">
      <span class="close-sidebar" @click="closeSidebar">&times;</span>
      <div class="sidebar-content">
        <h3>政策详情</h3>
        <p><strong>名称:</strong> <span>{{ selectedPolicy.label }}</span></p>
        <p><strong>类型:</strong> <span>{{ selectedPolicy.policyType }}</span></p>
        <p><strong>状态:</strong> <span>{{ selectedPolicy.status }}</span></p>
        <p><strong>影响:</strong> <span>{{ selectedPolicy.impact }}</span></p>
        <p><strong>国家/地区:</strong> <span>{{ selectedPolicy.country }}</span></p>
        <p><strong>HS编码:</strong> <span>{{ selectedPolicy.hsCode || 'N/A' }}</span></p>
        <p><strong>生效日期:</strong> <span>{{ selectedPolicy.effectiveDate || 'N/A' }}</span></p>
        <p><strong>废止日期:</strong> <span>{{ selectedPolicy.expiryDate || 'N/A' }}</span></p>
        <p><strong>描述:</strong> <span>{{ selectedPolicy.description }}</span></p>
      </div>
    </div>

    <!-- 大模型对话面板 -->
    <div :class="['llm-chat-panel', { 'open': isRightPanelOpen }]">
      <div class="chat-header">
        <h3>大模型助手</h3>
        <span class="close-chat-panel" @click="closeRightPanel">&times;</span>
      </div>
      <div class="chat-messages" ref="chatMessagesContainer">
        <div v-for="(message, index) in chatMessages" :key="index" :class="['message-bubble', message.sender]">
          <div class="sender-name">{{ message.sender === 'user' ? '您' : '助手' }}</div>
          <div class="message-text">{{ message.text }}</div>
        </div>
      </div>
      <div class="chat-input-area">
        <input
          type="text"
          v-model="userQuestion"
          @keyup.enter="sendMessage"
          placeholder="请输入您的问题..."
          class="chat-input"
        />
        <button @click="sendMessage" class="send-button">发送</button>
      </div>
    </div>

    <button class="show-right-dialog-btn" @click="openRightPanel">打开大模型助手</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import cytoscape from 'cytoscape';
// Cytoscape QTip extension requires jQuery and QTip2 to be globally available
// For a Vue environment, it's often better to import the extension directly
// if it supports modular import, or ensure jQuery and qtip2 are loaded globally
// before this component mounts.
// Assuming for this example, QTip2 is made globally available by a script tag or similar.
import 'qtip2/dist/jquery.qtip.min.css';
// You might need to import the extension directly if it's not self-registering
// Example: import 'cytoscape-qtip'; if such a module exists.
// For now, we'll assume the global script tag approach for qtip2 given the original HTML.

// Reactive states
const isSidebarOpen = ref(false);
const isRightPanelOpen = ref(false);
const selectedPolicy = ref({});
let cy = null; // Cytoscape instance

// Chat related reactive states
const chatMessages = ref([
  { sender: 'assistant', text: '您好！我是政策基因图谱的大模型助手，有什么可以帮您的吗？' }
]);
const userQuestion = ref('');
const chatMessagesContainer = ref(null); // Reference to the chat messages div for scrolling

const policyDataRaw = {
  nodes: [
    { id: 'P001', label: 'RCEP', policyType: 'FTA', status: '生效', impact: '利好', country: 'RCEP成员国', countryCode: 'RCEP', hsCode: 'ALL', description: '区域全面经济伙伴关系协定，旨在深化区域经济一体化。', effectiveDate: '2022-01-01', importance: 5 },
    { id: 'P002', label: 'CAFTA', policyType: 'FTA', status: '生效', impact: '利好', country: '中国与东盟', countryCode: 'CAFTA', hsCode: 'ALL', description: '中国-东盟自由贸易区，促进区域贸易发展。', effectiveDate: '2010-01-01', importance: 4 },
    { id: 'P003', label: '2024关税方案', policyType: 'Tariff', status: '生效', impact: '中性', country: '中国', countryCode: 'CN', hsCode: '8400, 8500', description: '中国海关总署2024年度进出口关税税则调整方案。', effectiveDate: '2024-01-01', importance: 3 },
    { id: 'P004', label: '输华食品安全', policyType: 'SPS', status: '生效', impact: '限制', country: '中国', countryCode: 'CN', hsCode: 'ALL Food', description: '中国海关对输华食品实施的检验检疫管理措施。', effectiveDate: '2021-01-01', importance: 4 },
    { id: 'P005', label: '出口管制法', policyType: 'TBT', status: '生效', impact: '限制', country: '中国', countryCode: 'CN', hsCode: '敏感技术', description: '中国对特定物项出口进行限制的法律。', effectiveDate: '2020-12-01', importance: 4 },
    { id: 'P006', label: '外商投资法实施', policyType: 'Investment', status: '生效', impact: '利好', country: '中国', countryCode: 'CN', hsCode: 'N/A', description: '优化外商投资环境的细化法规。', effectiveDate: '2020-01-01', importance: 3 },
    { id: 'P007', label: '区域物流草案', policyType: 'TradeFacilitation', status: '草案', impact: '利好', country: '东南亚多国', countryCode: 'SEA', hsCode: 'N/A', description: '旨在提升区域内物流效率和降低成本的草案。', effectiveDate: '待定', importance: 2 },
    { id: 'P008', label: '欧盟农产品关税', policyType: 'Tariff', status: '生效', impact: '限制', country: '欧盟', countryCode: 'EU', hsCode: '0400, 0700', description: '欧盟对部分进口农产品设定关税配额。', effectiveDate: '2023-01-01', importance: 2 },
    { id: 'P009', label: '进口废纸规定', policyType: 'SPS', status: '废止', impact: '中性', country: '中国', countryCode: 'CN', hsCode: '4707', description: '此前对进口废纸的严格管理规定，现已废止。', effectiveDate: '2018-01-01', expiryDate: '2021-01-01', importance: 1 },
    { id: 'P010', label: '跨境电商税优', policyType: 'Taxation', 'status': '生效', impact: '利好', country: '中国', countryCode: 'CN', hsCode: 'N/A', description: '鼓励跨境电商发展的税收优惠措施。', effectiveDate: '2019-01-01', importance: 3 },
    { id: 'P011', label: '数据安全法', policyType: 'Law', status: '生效', impact: '限制', country: 'CN', hsCode: 'N/A', description: '规范数据处理活动，保障数据安全。', effectiveDate: '2021-09-01', importance: 4 },
    { id: 'P012', label: '个信保护法', policyType: 'Law', status: '生效', impact: '限制', country: 'CN', hsCode: 'N/A', description: '保护个人信息权益，规范个人信息处理活动。', effectiveDate: '2021-11-01', importance: 4 },
    { id: 'P013', label: '区域一体化倡议', policyType: 'RegionalCooperation', status: '草案', impact: '利好', country: '亚洲多国', countryCode: 'ASIA', hsCode: 'N/A', description: '推动亚洲地区经济进一步融合的倡议。', effectiveDate: '待定', importance: 2 },
    { id: 'P014', label: '知识产权保护', policyType: 'IPR', status: '生效', impact: '利好', country: '中国', countryCode: 'CN', hsCode: 'N/A', description: '加强知识产权保护的行政法规。', effectiveDate: '2023-07-01', importance: 3 }
  ],
  edges: [
    { id: 'E001', source: 'P001', target: 'P002', relationType: '包含', description: 'RCEP包含了CAFTA的部分条款和精神。', strength: 0.8, direction: '单向' },
    { id: 'E002', source: 'P002', target: 'P003', relationType: '影响', description: 'CAFTA的实施可能影响中国对东盟国家的关税调整。', strength: 0.6, direction: '双向' },
    { id: 'E003', source: 'P004', target: 'P003', relationType: '制约', description: '输华食品的安全管理办法会制约相关农产品的关税政策。', strength: 0.7, direction: '单向' },
    { id: 'E004', source: 'P001', target: 'P006', relationType: '促进', description: 'RCEP的投资章节促进了外商投资。', strength: 0.9, direction: '单向' },
    { id: 'E005', source: 'P005', target: 'P011', relationType: '基于', description: '《出口管制法》的原则与《数据安全法》相关联。', strength: 0.8, direction: '双向' },
    { id: 'E006', source: 'P005', target: 'P012', relationType: '基于', description: '《出口管制法》的原则与《个人信息保护法》相关联。', strength: 0.8, direction: '双向' },
    { id: 'E007', source: 'P006', target: 'P010', relationType: '支持', description: '外商投资法实施条例支持了跨境电商的税收优惠政策。', strength: 0.7, direction: '单向' },
    { id: 'E008', source: 'P009', target: 'P003', relationType: '取消相关', description: '废纸管理规定的废止对相关商品关税产生影响。', strength: 0.4, direction: '单向' },
    { id: 'E009', source: 'P011', target: 'P012', relationType: '关联', description: '《数据安全法》和《个人信息保护法》共同构建了数据保护体系。', strength: 0.9, direction: '双向' },
    { id: 'E010', source: 'P013', target: 'P001', relationType: '促进', description: '深化区域一体化倡议旨在促进RCEP等区域协定的实施。', strength: 0.7, direction: '单向' },
    { id: 'E011', source: 'P001', target: 'P014', relationType: '包含条款', description: 'RCEP中包含知识产权保护的相关条款。', strength: 0.8, direction: '单向' },
    { id: 'E012', source: 'P014', target: 'P005', relationType: '支持', description: '知识产权保护的行政法规支持了出口管制中的知识产权相关内容。', strength: 0.6, direction: '单向' }
  ]
};

// Auxiliary functions (moved from HTML script)
const getPolicyTypeColor = (type) => {
  switch (type) {
    case 'FTA': return '#4285F4'; // Blue
    case 'Tariff': return '#EA4335'; // Red
    case 'SPS': return '#34A853'; // Green (Quarantine)
    case 'TBT': return '#FBBC05'; // Yellow (Technical Barriers to Trade)
    case 'Investment': return '#673AB7'; // Purple
    case 'TradeFacilitation': return '#00BCD4'; // Cyan
    case 'Taxation': return '#FF9800'; // Orange
    case 'Law': return '#607D8B'; // Blue-grey
    case 'RegionalCooperation': return '#E91E63'; // Pink
    case 'IPR': return '#9C27B0'; // Purple
    default: return '#9E9E9E'; // Gray
  }
};

const getPolicyTypeIcon = (type) => {
  switch (type) {
    case 'FTA': return '🤝'; // Handshake
    case 'Tariff': return '💰'; // Money bag
    case 'SPS': return '🌿'; // Plant
    case 'TBT': return '⚙️'; // Gear
    case 'Investment': return '📈'; // Growth
    case 'TradeFacilitation': return '🚚'; // Truck
    case 'Taxation': return '💸'; // Money with wings
    case 'Law': return '⚖️'; // Scales of justice
    case 'RegionalCooperation': return '🌐'; // Globe
    case 'IPR': return '💡'; // Lightbulb
    default: return '📄'; // Document
  }
};

const getPolicyTypeShape = (type) => {
  switch (type) {
    case 'FTA': return 'octagon';
    case 'Tariff': return 'rectangle';
    case 'SPS': return 'roundrectangle';
    case 'TBT': return 'ellipse';
    case 'Investment': return 'triangle';
    case 'TradeFacilitation': return 'pentagon';
    case 'Taxation': return 'star';
    case 'Law': return 'diamond';
    case 'RegionalCooperation': return 'heptagon';
    case 'IPR': return 'tag';
    default: return 'ellipse';
  }
};

const getNodeSize = (importance) => {
  return 40 + importance * 8;
};

const getEdgeStrength = (strength) => {
  return 1 + strength * 1.5;
};

// Functions to manage sidebar and right panel
const openSidebar = (policy) => {
  selectedPolicy.value = policy;
  isSidebarOpen.value = true;
};

const closeSidebar = () => {
  isSidebarOpen.value = false;
  // Also clear any highlights when sidebar closes
  if (cy) {
    cy.elements().removeClass('faded highlighted-node highlighted-edge');
  }
};

const openRightPanel = () => {
  isRightPanelOpen.value = true;
};

const closeRightPanel = () => {
  isRightPanelOpen.value = false;
};

// Function to simulate LLM response and add to chat
const sendMessage = () => {
  const question = userQuestion.value.trim();
  if (!question) return;

  // Add user message
  chatMessages.value.push({ sender: 'user', text: question });
  userQuestion.value = ''; // Clear input

  // Simulate LLM response after a short delay
  setTimeout(() => {
    let assistantResponse = '';
    const lowerCaseQuestion = question.toLowerCase();

    if (lowerCaseQuestion.includes('rcep')) {
      assistantResponse = 'RCEP（区域全面经济伙伴关系协定）是一个大型自由贸易协定，旨在深化区域经济一体化。';
    } else if (lowerCaseQuestion.includes('关税')) {
      assistantResponse = '关税是国家对进出口商品征收的税费，是影响贸易的重要政策工具。';
    } else if (lowerCaseQuestion.includes('食品安全')) {
      assistantResponse = '食品安全政策通常涉及对食品的检验检疫标准和管理措施，以保障消费者健康。';
    } else if (lowerCaseQuestion.includes('数据安全')) {
      assistantResponse = '数据安全法旨在规范数据处理活动，保障数据安全和个人信息权益。';
    } else if (lowerCaseQuestion.includes('你好') || lowerCaseQuestion.includes('您好')) {
      assistantResponse = '您好！有什么我可以为您解答的吗？';
    } else if (lowerCaseQuestion.includes('谢谢')) {
      assistantResponse = '不客气！很高兴能帮到您。';
    } else if (lowerCaseQuestion.includes('政策')) {
      assistantResponse = '政策基因图谱可以帮助您可视化和理解不同政策之间的关联。您可以点击图中的节点查看政策详情。';
    } else {
      assistantResponse = '抱歉，我目前只能回答关于政策基因图谱中已有政策的简单问题。您可以尝试询问关于RCEP、关税、数据安全等方面的问题。';
    }

    chatMessages.value.push({ sender: 'assistant', text: assistantResponse });
    // Scroll to the bottom after new messages are added
    nextTick(() => {
      if (chatMessagesContainer.value) {
        chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
      }
    });
  }, 1000); // Simulate 1 second processing time
};

// Cytoscape initialization and event handling
onMounted(() => {
  // Format node data
  const formattedNodes = policyDataRaw.nodes.map(node => ({
    data: {
      id: node.id,
      label: `${getPolicyTypeIcon(node.policyType)} ${node.label}`,
      color: getPolicyTypeColor(node.policyType),
      size: getNodeSize(node.importance),
      shape: getPolicyTypeShape(node.policyType),
      fontSize: 10 + node.importance * 1.5,
      fullData: node
    },
    classes: 'cy-node'
  }));

  // Format edge data
  const formattedEdges = policyDataRaw.edges.map(edge => ({
    data: {
      id: edge.id,
      source: edge.source,
      target: edge.target,
      label: edge.relationType,
      color: edge.relationType === '基于' ? '#3367D6' : (edge.relationType === '引用' ? '#DB4437' : '#9E9E9E'),
      strength: getEdgeStrength(edge.strength),
      arrowShape: edge.direction === '单向' ? 'triangle' : 'none',
      lineStyle: edge.relationType === '引用' ? 'dashed' : 'solid',
      fullData: edge
    },
    classes: 'cy-edge'
  }));

  cy = cytoscape({
    container: document.getElementById('policy-graph'), // Use the actual DOM element
    elements: formattedNodes.concat(formattedEdges),
    layout: {
      name: 'cose',
      animate: true,
      animationDuration: 800,
      nodeDimensionsIncludeLabels: true,
      padding: 30
    },
    style: [
      {
        selector: 'node',
        style: {
          'label': 'data(label)',
          'font-size': 'data(fontSize)',
          'text-valign': 'center',
          'text-halign': 'center',
          'background-color': 'data(color)',
          'width': 'data(size)',
          'height': 'data(size)',
          'border-width': 1,
          'border-color': '#ccc',
          'shape': 'data(shape)',
          'text-wrap': 'wrap',
          'text-max-width': 'data(size)',
          'padding': '10px',
          'color': '#FFF',
          'text-outline-color': '#000',
          'text-outline-width': 1,
          'cursor': 'pointer',
          'transition-property': 'transform, filter',
          'transition-duration': '0.2s',
          'transition-timing-function': 'ease-out'
        }
      },
      {
        selector: 'edge',
        style: {
          'width': 'data(strength)',
          'line-color': 'data(color)',
          'target-arrow-color': 'data(color)',
          'target-arrow-shape': 'data(arrowShape)',
          'curve-style': 'bezier',
          'label': 'data(label)',
          'font-size': '10px',
          'text-background-opacity': 1,
          'text-background-color': '#fff',
          'line-style': 'data(lineStyle)',
          'color': '#555',
          'text-outline-color': '#fff',
          'text-outline-width': 1,
          'transition-property': 'width, line-color, target-arrow-color',
          'transition-duration': '0.2s',
          'transition-timing-function': 'ease-out'
        }
      },
      {
        selector: 'node:selected',
        style: {
          'border-width': 4,
          'border-color': '#FFC107'
        }
      },
      {
        selector: 'edge:selected',
        style: {
          'line-color': '#FFC107',
          'target-arrow-color': '#FFC107',
          'width': 4
        }
      },
      {
        selector: '.faded',
        style: {
          'opacity': 0.2,
          'transition-property': 'opacity',
          'transition-duration': '0.3s',
          'transition-timing-function': 'ease-out'
        }
      },
      {
        selector: '.highlighted-node',
        style: {
          'border-color': '#FFC107',
          'border-width': 4,
          'opacity': 1,
          'transition-property': 'border-color, border-width, opacity',
          'transition-duration': '0.3s',
          'transition-timing-function': 'ease-out'
        }
      },
      {
        selector: '.highlighted-edge',
        style: {
          'line-color': '#FFC107',
          'target-arrow-color': '#FFC107',
          'width': 4,
          'opacity': 1,
          'transition-property': 'line-color, width, opacity',
          'transition-duration': '0.3s',
          'transition-timing-function': 'ease-out'
        }
      }
    ],
    wheelSensitivity: 0.1,
    minZoom: 0.5,
    maxZoom: 3,
  });

  // Node click event: Show sidebar
  cy.on('tap', 'node', function(evt){
    const node = evt.target;
    openSidebar(node.data().fullData);
  });

  // Click on graph background to close sidebar and right panel
  cy.on('tap', function(evt){
    if(evt.target === cy){
      closeSidebar();
      closeRightPanel();
    }
  });

  // Node mouseover (Hover) effect - Tooltip and highlight
  cy.on('mouseover', 'node', function(event) {
    const node = event.target;
    const data = node.data().fullData;

    node.addClass('highlighted-node');

    const connectedEdges = node.connectedEdges();
    const connectedNodes = node.neighborhood().nodes().not(node);

    connectedEdges.addClass('highlighted-edge');
    connectedNodes.addClass('highlighted-node');

    cy.elements().not(node.add(connectedEdges).add(connectedNodes)).addClass('faded');

    // Use a try-catch for qtip as it might not be properly integrated without jQuery
    // For a robust Vue solution, consider a dedicated Vue tooltip library or a Cytoscape extension
    // that doesn't rely on global jQuery/qtip.
    try {
      node.qtip({
        content: `<strong>${getPolicyTypeIcon(data.policyType)} ${data.label}</strong><br>
          类型: ${data.policyType}<br>
          状态: ${data.status}<br>
          影响: ${data.impact}<br>
          国家: ${data.countryCode || 'N/A'}<br>
          ${data.description.substring(0, 80)}...`,
        position: { my: 'bottom center', at: 'top center' },
        show: { event: 'mouseover', solo: true, ready: true },
        hide: { event: 'mouseout unfocus' },
        style: {
          classes: 'qtip-bootstrap',
          tip: { width: 16, height: 8 }
        }
      }, event);
    } catch (e) {
      console.warn("qTip2 might not be fully integrated or initialized:", e);
    }
  });

  // Mouseout from node: remove highlight and fade effect
  cy.on('mouseout', 'node', function(event) {
    cy.elements().removeClass('faded highlighted-node highlighted-edge');
  });

  // Edge mouseover (Hover) effect - Tooltip
  cy.on('mouseover', 'edge', function(event) {
    const edge = event.target;
    const data = edge.data().fullData;
    try {
      edge.qtip({
        content: `<strong>关系: ${data.relationType}</strong><br>
          来源: ${cy.$id(data.source).data('label').replace(/[\u{1F000}-\u{1FFFF}]/gu, '')}<br>
          目标: ${cy.$id(data.target).data('label').replace(/[\u{1F000}-\u{1FFFF}]/gu, '')}<br>
          描述: ${data.description || '无描述'}`,
        position: { my: 'bottom center', at: 'top center' },
        show: { event: 'mouseover', solo: true, ready: true },
        hide: { event: 'mouseout unfocus' },
        style: {
          classes: 'qtip-bootstrap',
          tip: { width: 16, height: 8 }
        }
      }, event);
    } catch (e) {
      console.warn("qTip2 might not be fully integrated or initialized for edges:", e);
    }
  });

  // Mouseout from edge: also clear all highlight and fade effects, ensuring graph is fully restored
  cy.on('mouseout', 'edge', function(event) {
    cy.elements().removeClass('faded highlighted-node highlighted-edge');
  });
});

onUnmounted(() => {
  if (cy) {
    cy.destroy(); // Clean up Cytoscape instance when component is unmounted
  }
});
</script>

<style scoped>
/*
  Base styles for the Vue component.
  You can customize these to fit your application's design system,
  or integrate with a framework like Tailwind CSS.
*/
.policy-graph-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden; /* Prevent body scroll if graph takes full height */
  /* 修改背景颜色 */
  background: linear-gradient(135deg, rgba(26, 37, 61, 0.8) 0%, rgba(36, 53, 81, 0.6) 100%);
  backdrop-filter: blur(20px);
  background-color: rgb(242, 241, 242);
}

h1 {
  text-align: center;
  margin: 10px 0;
  color: #faf7f7;
  font-size: 24px;
}

#policy-graph {
  flex-grow: 1; /* Make it take available height */
  width: 100%;
  border: 1px solid #eee;
  /* 修改背景颜色 */
  background: linear-gradient(135deg, rgba(26, 37, 61, 0.8) 0%, rgba(36, 53, 81, 0.6) 100%);
  backdrop-filter: blur(20px);
  background-color: linear-gradient(135deg, rgba(26, 37, 61, 0.8) 0%, rgba(36, 53, 81, 0.6) 100%);
}

/* Sidebar styles (Policy Details) */
.detail-sidebar {
  position: fixed;
  top: 20px; /* Changed from 20 to 0 to align with top of viewport */
  right: -400px; /* Hidden by default */
  width: 380px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  transition: right 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 1000;
}

.detail-sidebar.open {
  right: 0;
}

.close-sidebar {
  float: right;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: #666;
}

.sidebar-content {
  clear: both;
  padding-top: 10px;
}

.sidebar-content h3 {
  margin-top: 20;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.sidebar-content p {
  margin-bottom: 8px;
  line-height: 1.6;
  font-size: 14px;
  color: #0f0c0c;
}

.sidebar-content strong {
  color: #333;
  display: inline-block;
  width: 90px;
}

/* LLM Chat Panel styles (replaces right-panel-dialog) */
.llm-chat-panel {
  position: fixed;
  top: 20px; /* Changed from 20 to 0 to align with top of viewport */
  right: -360px; /* Hidden by default */
  width: 360px;
  height: 90%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15); /* Changed shadow direction for consistency */
  transition: right 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: hidden; /* Hide overflow for the panel itself, chat messages will scroll */
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.llm-chat-panel.open {
  right: 0;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.chat-header h3 {
  margin: 0;
  color: #333;
}

.close-chat-panel {
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: #666;
}

.chat-messages {
  flex-grow: 1; /* Takes up available space */
  overflow-y: auto; /* Scroll for messages */
  padding-right: 10px; /* Space for scrollbar */
  margin-bottom: 15px;
  color:#0f0c0c
}

.message-bubble {
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  word-wrap: break-word;
}

.message-bubble.user {
  background-color: #e0f7fa; /* Light blue for user */
  align-self: flex-end; /* Align to right */
  margin-left: auto; /* Push to right */
  border-bottom-right-radius: 4px;
}

.message-bubble.assistant {
  background-color: #f1f0f0; /* Light grey for assistant */
  align-self: flex-start; /* Align to left */
  margin-right: auto; /* Push to left */
  border-bottom-left-radius: 4px;
}

.sender-name {
  font-size: 0.8em;
  color: #777;
  margin-bottom: 4px;
}

.message-bubble.user .sender-name {
  text-align: right;
}

.chat-input-area {
  display: flex;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.chat-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #040404;
  border-radius: 20px;
  margin-right: 10px;
  font-size: 14px;
  outline: none;
}

.chat-input:focus {
  border-color: #4285F4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

.send-button {
  padding: 10px 20px;
  background-color: #4285F4; /* Google Blue */
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.send-button:hover {
  background-color: #3367D6; /* Darker blue */
}

.show-right-dialog-btn {
  position: fixed;
  bottom: 20px;
  left: 30px;
  padding: 10px 20px;
  background-color: #34A853;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 1500;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.show-right-dialog-btn:hover {
  background-color: #2c8e47;
}

</style>
